<template>
  <div class="admin-container">
    <el-table :data="accountList" style="width: 100%;" stripe>
      <el-table-column prop="aid" label="用户编号" width="180">
      </el-table-column>
      <el-table-column prop="aname" label="姓名" width="180"> </el-table-column>
      <el-table-column label="密码重置" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="accountReset(scope.row.aid)">重置密码
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="identity" label="身份" width="180"> </el-table-column>
      <el-table-column label="状态码(是否可用)" width="300">
        <template slot-scope="scope">
          <el-switch :value="scope.row.astatus == '可用'" active-color="#13ce66" inactive-color="#ff4949" active-text="可用"
            inactive-text="禁用" @change="updateStatus(scope.row.aid)">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum" :page-sizes="[3, 6, 9, 12]" :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//导出
export default {
  data() {
    return {
      aid: "",
      accountList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
      },
    };
  },
  methods: {
    updateStatus(aid){
      this.$axios.put("account/updateStatus?aid=" + aid)
        .then((result) => {
          let vo = result.data;
          this.$message(vo.message);
          if (vo.code == 200) {
            this.list();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    accountReset(aid){
      this.$axios.put("account/reset?aid=" + aid)
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.$message(vo.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.list();
    },
    list() {
      this.$axios.get("account/getAll?pageNum=" +this.pageInfo.pageNum +"&pageSize=" +this.pageInfo.pageSize)
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.accountList = vo.data.list;
            this.pageInfo = vo.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.list();
  },
};
</script>
<style scoped>
.admin-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.el-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-button {
  margin-right: 10px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-pagination {
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

body {
  background-color: #f5f5f5;
}

.el-header,
.el-aside {
  background-color: #f5f5f5;
}
</style>